<template>
  <div>
    <div class="system-title">
      <div class="title-left">系统设置</div>
    </div>
    <div class="change_setting">
      <div class="setting-show">移动端显示设置</div>
      <el-form class='setting-form' :rules="rules" ref="form" :model="form" label-width="130px">
          <el-form-item label="活动标题:" prop="name">
            <el-input class='form-content' placeholder='输入活动标题' v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="会员注册URL:" prop="path">
            <el-input class='form-content' placeholder='请输入会员注册URL' v-model="form.path"></el-input>
          </el-form-item>
          <el-form-item label="主题颜色:">
            <div>
              <input type="color" v-model="color" style='width:150px;'>
            </div>
          </el-form-item>
      </el-form>
      <div  class="setting-show">分享内容设置<span class="small-show">（活动首页分享时，分享内容在此设置；活动详情页面的分享内容请在具体活动中设置）</span></div>
      <el-form class='setting-form' :rules="rules" ref="form" :model="form" label-width="120px">
          <el-form-item label="分享标题:" placeholder='请输入标题'>
            <el-input class='form-content' v-model="form.asharetitle"></el-input>
          </el-form-item>
          <el-form-item label="分享描述:">
            <textarea class='form-content form-content-text' v-model="form.asharedetail"></textarea>
          </el-form-item>
          <el-form-item label='分享图片:'>
				    <div style="overflow:hidden">
				      <div v-show='posterimg' style='float:left;margin-right:10px;position:relative'>
                <img ref='imgList' style='display:inline-block;' width="150" height="150" :src="posterimg" alt="">
                <div class="close" @click='handleCLose'>×</div>
          		</div>
              <el-upload 
                style='float:left;'
                v-show='!posterimg'
	              class='upload-img'
	              :action="RTRoot+'/marketweb/img/uploadImg?width=300&height=300'"
	              :show-file-list='false'
	              :before-upload='handleBeforePost'
	              :on-success='handleSuccess'>
	            <i class="el-icon-plus"></i>

            	</el-upload>	
              </div>
            	<div style="display:block;padding-left:10px;color:#f00;font-size:14px;">*大小须小于100K，建议上传正方形图片</div>
            
			</el-form-item>	
      </el-form>
      <div class="setting-show">模板消息配置<span class="small-show">（设置相应事件发生时系统发送的模板消息的ID号）</span></div>
       <div class='notice-info'>报名审核结果通知：</div>
       <el-form class='setting-form' :rules="rules" ref="form" :model="form" label-width="130px">
            <el-form-item label="审核通过模板id:" label-width="130px">
                <el-input class='form-content' placeholder='请输入审核通过模板id' v-model="form.agreeid"></el-input>
            </el-form-item>
            <el-form-item label="审核驳回模板id :" label-width="130px">
                <el-input class='form-content' placeholder='请输入审核驳回模板id' v-model="form.rejectid"></el-input>
            </el-form-item>
      </el-form>
       <el-button type="primary" style='margin:30px auto;display:block;' @click="onSubmit">保存修改</el-button>
    </div>
  </div>
</template>
<script>
import colorPicker from './color_picker.vue'
  export default{
    data(){
      return{
        color:'#ff4b2d',
        bannerVisible:false,
        posterimg:'',
        RTRoot:process.env.API_ROOT_URL,
        form:{
          name:'微活动',
          path:null,
          rejectid:'',
          agreeid:'',
          asharedetail:'',
          asharetitle:'微活动'
        },
        rules:{
          name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                  ],
                path: [{ required: true, message: '请输入会员注册URL'}]
        }
      }
    },

    components:{
      'colorpicker':colorPicker
    },
    methods:{
      handleCLose(){
        this.posterimg = ''
      },
      handleBeforePost(file){
         const isJPG = file.type === 'image/jpg';
		         const isJPEG = file.type === 'image/jpeg';
		         const isLt2M =  file.size / 1024 / 1024 < 0.1;
		        if (!isLt2M) {
		          this.$message.error('上传头像图片大小不能超过100k!');
		        }
		         if (!isJPG && !isJPEG) {
		                this.$message.error('仅支持上传JPG格式!');
		            }

		          return (isJPG || isJPEG)  && isLt2M;
      },

      handleSuccess(response){
          this.posterimg = response.path;
          this.bannerVisible = true;
      },

      getSettingData(){
        this.$http.post('marketweb/system/querySystemSet',{
          keyAdmin:this.$store.state.keyAdmin
        }).then(response=>{
          if(response.body.code==200){
            this.form.name = response.body.actionname
            this.form.path = response.body.userpath
            this.form.agreeid = response.body.agreeid
            this.form.rejectid  = response.body.rejectid 
            this.color = response.body.actioncolor?response.body.actioncolor:'#ff4b2d'
            this.form.asharetitle = response.body.asharetitle?response.body.asharetitle:'微活动'
            this.form.asharedetail = response.body.asharedetail
            this.posterimg = response.body.ashareimg
          }else{
            this.$message.error(response.body.message)
          }
          
        },response=>{

        })
      },

      headleChangeColor(e){
        this.color = e;
      },

      onSubmit(){
        if(this.form.name.length>2&&this.form.name.length<6){
          if(this.form.link!=''){
            this.$confirm('确定修改设置信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.$http.post('marketweb/system/updateSystemSet',{
          keyAdmin:this.$store.state.keyAdmin,
          actionname:this.form.name,
          userpath:this.form.path,
          rejectid :this.form.rejectid,
          agreeid:this.form.agreeid,
          actioncolor:this.color,
          asharetitle:this.form.asharetitle,
          asharedetail:this.form.asharedetail,
          ashareimg:this.posterimg
        }).then(response=>{
          if (response.body.code == 200) {
            this.$message({
                  message: '恭喜你，保存成功',
                  type: 'success'
                })
          }else{
            this.$message.error(response.body.msg)
          }
           
        },response=>{
          this.$message.error('保存失败')
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
          }
        }else{
          this.$message.error('输入名称不符合')
        }
      }
    },
    created(){
      this.getSettingData()
    }
  }
</script>
<style scoped>
  .title-left{
    padding: 0 10px;
    border-bottom:2px solid #169bd5;
    padding-bottom: 15px;
    font-size: 18px;
    color: #4fabe7;
  }
  .el-icon-setting{
    font-size: 24px;
    padding: 0 2px;
  }
  .change_setting{
    margin-top: 15px;
    text-align: left;
  }
  .small-show{
    font-size: 13px;
    color: #999;
  }
  .setting-show{
    font-size: 15px;
    background: #eee;
    padding:10px 20px;
    margin-bottom: 10px;
  }
  .form-content-text{
    height: 120px;
  }
  .form-content{
    width: 360px;
  }
  .upload-img{
		width: 150px;
		height: 150px;
		text-align: center;
		line-height: 150px;
		font-size: 50px;
		border: 1px dotted #ddd;
	}
  .setting-form{
    width: 500px;
    text-align: left;
  }
  .close{
    cursor: pointer;
    font-size: 18px;
    background: #f00;
    color: #fff;
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 10;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
  }
  .notice-info{
    padding: 0 10px;
    margin: 20px 5px ;
    border-left: 3px solid #20a0ff;
  }
</style>